<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh">
<head>

</head>

<body class="no-skin">

	<div class="page-content-area">
		<div class="page-header">
			<h1>
				Tables <small> <i class="ace-icon fa fa-angle-double-right"></i>
					Static &amp; Dynamic Tables
				</small>
			</h1>
		</div>
		<!-- /.page-header -->

		<!-- 添加按钮 
		
		<button id="subadd" type="button" class="btn btn-success btn-lg"
			data-toggle="modal" data-target="#addSubject">AddSubject</button>
		-->
		<!-- Modal -->
		<div class="modal fade" id="addSubject" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel">
			<div class="modal-dialog modal-sm" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">添加科目</h4>
					</div>

					<form:form id="subjectForm" action="addSubject" method="post"
						modelAttribute="subject">
						<!-- boby -->
						<div class="modal-body">
							<table>
								<tr>
									<!-- 
											
												<td align="left">ID :</td>
												<td align="center"><form:input type="text" path="subId"
														class="idReadonly" readonly="false" required="true"
														minlength="1" maxlength="20" number="true"
														cssClass="{digits:true}" />
											 -->

								</tr>

								<tr>
									<td>科目:</td>
									<td><form:input type="text" path="name" required="true"
											minlength="1" maxlength="25" /></td>
								</tr>
								<tr>
									<td align="left">类型:</td>
									<td><form:input type="text" path="description"
											required="true" /></td>
								</tr>
								<tr>
									<td>考试人数:</td>
									<td><form:input type="text" path="testCount" digits="true"
											minlength="1" /></td>
								</tr>
								<tr>
									<td>总时长（分钟）:</td>
									<td><form:input type="text" path="totalTime" /></td>
								</tr>
								<tr>
									<td>满分分数:</td>
									<td><form:input type="text" path="totalScore" /></td>
								</tr>
								<tr>
									<td>状态:</td>
									<td><form:input type="text" path="status"
											style="display: none" id="subject_status" />关闭：<input
										type="radio" name="status" class="open" value="0">&nbsp;&nbsp;开启：<input
										type="radio" name="status" class="open" value="1"></td>
								</tr>
							</table>
						</div>

						<!-- modal-footer -->
						<div class="modal-footer">
							<button type="button" class="btn btn-default"
								data-dismiss="modal">关闭</button>
							<button id="submit" type="submit" class="btn btn-primary">添加</button>
						</div>
					</form:form>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-xs-12">
				<!-- PAGE CONTENT BEGINS -->
				<div class="row">
					<div class="col-xs-12">
						<table id="sample-table-1"
							class="table table-striped table-bordered table-hover">
							<thead>
								<tr>
									<th>ID</th>
									<th>科目</th>
									<th>类型</th>
									<th>考试人数</th>
									<th>总时长(分钟)</th>
									<th>总分数</th>
									<th>状态</th>
									<!-- 
									<th></th>
									 -->
								</tr>
							</thead>

							<tbody>
								<c:forEach items="${subjectList }" var="subject">
									<tr>
										<td>${subject.subId}</td>
										<td>${subject.name}</td>
										<td>${subject.description}</td>
										<td>${subject.testCount}</td>
										<td>${subject.totalTime}</td>
										<td>${subject.totalScore}</td>
										<td><c:if test="${subject.status > 0}">
												<p>
													<c:out value="开启"></c:out>
												</p>
											</c:if> <c:if test="${subject.status == 0}">
												<p>
													<c:out value="关闭"></c:out>
												</p>
											</c:if></td>

										<!-- 操作
										<td>
											<div class="hidden-sm hidden-xs btn-group">

												<button id="${subject.subId}" class="btn btn-xs btn-info"
													data-toggle="modal" data-target="#add">
													<i class="ace-icon fa fa-pencil bigger-120"></i>
												</button>

												<button class="btn btn-xs btn-danger" data-toggle="modal"
													data-target="#delete-${subject.subId}">
													<i class="ace-icon fa fa-trash-o bigger-120"></i>
												</button>

											</div>

											<div class="hidden-md hidden-lg">
												<div class="inline position-relative">
													<button class="btn btn-minier btn-primary dropdown-toggle"
														data-toggle="dropdown" data-position="auto">
														<i class="ace-icon fa fa-cog icon-only bigger-110"></i>
													</button>

													<ul
														class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">


														<li><a href="#" class="tooltip-success"
															data-rel="tooltip" title="Edit" data-toggle="modal"
															data-target="#edit-${subject.subId}"> <span
																class="green"> <i
																	class="ace-icon fa fa-pencil-square-o bigger-120"></i>
															</span>
														</a></li>

														<li><a href="#" class="tooltip-error"
															data-rel="tooltip" title="Delete" data-toggle="modal"
															data-target="#delete-${subject.subId}"> <span
																class="red"> <i
																	class="ace-icon fa fa-trash-o bigger-120"></i>
															</span>
														</a></li>
													</ul>
												</div>
										</div>
										-->
										<!-- 删除模态框 -->
										<!-- Modal -->
										<div class="modal fade" id="delete-${subject.subId}"
											tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
											<div class="modal-dialog" role="document">
												<div class="modal-content">
													<div class="modal-header">
														<button type="button" class="close" data-dismiss="modal"
															aria-label="Close">
															<span aria-hidden="true">&times;</span>
														</button>
														<h4 class="modal-title" id="myModalLabel">删除科目</h4>
													</div>
													<!-- boby -->
													<div class="modal-body">确定要删除${subject.subId}-${subject.name}科目吗？</div>

													<!-- modal-footer -->
													<div class="modal-footer">
														<button type="button" class="btn btn-default"
															data-dismiss="modal">关闭</button>
														<a href="deleteSubject/${subject.subId}"><button
																type="button" class="btn btn-primary">确定</button></a>
													</div>
												</div>
											</div>
										</div>
										</td>

									</tr>
								</c:forEach>


							</tbody>
						</table>
					</div>
					<!-- /.span -->
				</div>
				<!-- /.row -->

				<!-- PAGE CONTENT ENDS -->
			</div>
			<!-- /.col -->
		</div>
		<!-- /.row -->
	</div>
	<!-- /.page-content-area -->
	</div>
	<!-- /.main-container -->

	<!-- basic scripts -->

	<!--[if !IE]> -->
	<script type="text/javascript">
		window.jQuery
				|| document
						.write("_$tag____________________________________________________________________________"
								+ "_$tag_______");
	</script>

	<!-- <![endif]-->

	<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='${pageContext.request.contextPath }/static/assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
	<script type="text/javascript">
		if ('ontouchstart' in document.documentElement)
			document
					.write("<script src='${pageContext.request.contextPath }/static/assets/js/jquery.mobile.custom.min.js'>"
							+ "<"+"/script>");
	</script>
	<script
		src="${pageContext.request.contextPath }/static/assets/js/bootstrap.min.js"></script>

	<!-- page specific plugin scripts -->
	<script
		src="${pageContext.request.contextPath }/static/assets/js/jquery.dataTables.min.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/assets/js/jquery.dataTables.bootstrap.js"></script>

	<!-- ace scripts -->
	<script
		src="${pageContext.request.contextPath }/static/assets/js/ace-elements.min.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/assets/js/ace.min.js"></script>

	<!-- inline scripts related to this page -->
	<script type="text/javascript">
		jQuery(function($) {
			var oTable1 = $('#sample-table-2')
			//.wrap("<div class='dataTables_borderWrap' />")   //if you are applying horizontal scrolling (sScrollX)
			.dataTable({
				bAutoWidth : false,
				"aoColumns" : [ {
					"bSortable" : false
				}, null, null, null, null, null, {
					"bSortable" : false
				} ],
				"aaSorting" : [],

			//,
			//"sScrollY": "200px",
			//"bPaginate": false,

			//"sScrollX": "100%",
			//"sScrollXInner": "120%",
			//"bScrollCollapse": true,
			//Note: if you are applying horizontal scrolling (sScrollX) on a ".table-bordered"
			//you may want to wrap the table inside a "div.dataTables_borderWrap" element

			//"iDisplayLength": 50
			});
			/**
			var tableTools = new $.fn.dataTable.TableTools( oTable1, {
				"sSwfPath": "../../copy_csv_xls_pdf.swf",
			    "buttons": [
			        "copy",
			        "csv",
			        "xls",
					"pdf",
			        "print"
			    ]
			} );
			$( tableTools.fnContainer() ).insertBefore('#sample-table-2');
			 */

			$(document).on(
					'click',
					'th input:checkbox',
					function() {
						var that = this;
						$(this).closest('table').find(
								'tr > td:first-child input:checkbox').each(
								function() {
									this.checked = that.checked;
									$(this).closest('tr').toggleClass(
											'selected');
								});
					});

			$('[data-rel="tooltip"]').tooltip({
				placement : tooltip_placement
			});
			function tooltip_placement(context, source) {
				var $source = $(source);
				var $parent = $source.closest('table')
				var off1 = $parent.offset();
				var w1 = $parent.width();

				var off2 = $source.offset();
				//var w2 = $source.width();

				if (parseInt(off2.left) < parseInt(off1.left)
						+ parseInt(w1 / 2))
					return 'right';
				return 'left';
			}

		})
	</script>

	<!-- the following scripts are used in demo only for onpage help and you don't need them -->
	<link rel="stylesheet"
		href="${pageContext.request.contextPath }/static/assets/css/ace.onpage-help.css" />
	<link rel="stylesheet"
		href="${pageContext.request.contextPath }/static/docs/assets/js/themes/sunburst.css" />

	<script type="text/javascript">
		ace.vars['base'] = '..';
	</script>
	<script
		src="${pageContext.request.contextPath }/static/assets/js/ace/elements.onpage-help.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/assets/js/ace/ace.onpage-help.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/docs/assets/js/rainbow.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/docs/assets/js/language/generic.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/docs/assets/js/language/html.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/docs/assets/js/language/css.js"></script>
	<script
		src="${pageContext.request.contextPath }/static/docs/assets/js/language/javascript.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath }/static/js/validate.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath }/static/lib/jquery.validate.min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath }/static/js/subjectedit.js"></script>
</body>
</html>
